/* 订单页 */
/* header */
.step-list {
    float      : left;
    margin-left: 50px;
    line-height: 80px;

    li {
        float    : left;
        font-size: 14px;
        color    : #999;

        &::after {
            content: '>';
            margin : 0 10px;
            color  : #999;
        }

        &:last-child::after {
            content: '';
        }

        &.step-list-on {
            color: #333;
        }
    }
}

.user-list {
    float      : right;
    height     : 40px;
    font-size  : 12px;
    line-height: 40px;
    margin-top : 20px;

    &:last-child{
        display: none;
    }

    li {
        float  : left;
        padding: 0 20px;

        a {
            color: #666;

            &:hover {
                color: #008cff;
            }

            .login-name {
                display       : inline-block;
                max-width     : 72px;
                overflow-x    : hidden;
                text-overflow : ellipsis;
                vertical-align: bottom;
                white-space   : nowrap;
            }
        }
    }
}

/* container */
.container-wrap {
    margin-top      : 80px;
    padding-bottom  : 40px;
    overflow        : hidden;
    background-color: #F4F6FA;

    .cart-header {
        height          : 50px;
        line-height     : 50px;
        margin-top      : 10px;
        font-size       : 12px;
        background-color: #fff;
        color           : rgba(51, 51, 51, .4);
        border-bottom   : 1px solid #EFEFEF;
    }

    .cart-order {
        margin-bottom: 10px;

        .cart-order-header {
            height          : 50px;
            line-height     : 49px;
            padding-left    : 24px;
            background-color: #FAFAFC;

            .cart-free {
                display       : inline-block;
                vertical-align: middle;
                font-size     : 12px;
                color         : #8c8c8c;
                margin-left   : 24px;
            }
        }
    }
}

table {
    border-collapse: collapse;
    border-spacing : 0;

    tr {
        vertical-align: middle;
        display       : table-row;

        td {
            display: table-cell;
        }
    }
}

.cart-select {
    width       : 550px;
    text-align  : left;
    padding-left: 24px;
}

.cart-price {
    width     : 220px;
    text-align: center;
}

.cart-number {
    width     : 200px;
    text-align: center;
}

.cart-total {
    width     : 160px;
    text-align: center;
}

.cart-edit,
.cart-Com {
    width        : 110px;
    text-align   : right;
    color        : #00c3f5;
    padding-right: 48px;
    cursor       : pointer;
}

.cart-Com {
    display: none;
}

.select-box {
    display       : inline-block;
    vertical-align: middle;
    color         : #333;
    cursor        : pointer;
    font-size     : 14px;
    line-height   : 0;

    input {
        display: none;
    }

    span {
        vertical-align: middle;
    }

    .checkbox,
    .itembox {
        margin-right    : 5px;
        display         : inline-block;
        vertical-align  : middle;
        width           : 18px;
        height          : 18px;
        border          : 1px solid #BDBDBD;
        border-radius   : 2px;
        background-color: #fff;
        text-align      : center;
        font-size       : 10px;
        line-height     : 17px;
        cursor          : pointer;

        i {
            display: none;
        }

        &.checked {
            border-color    : #00c3f5;
            background-color: #00c3f5;

            i {
                display: block;
                color  : #fff;
            }
        }

        span {
            display       : inline-block;
            vertical-align: middle;
        }
    }
}

/* 商品订单 */
.cart-order-body {
    border-bottom   : 1px solid #EFEFEF;
    background-color: #fff;

    tr {
        height    : 150px;
        border-top: 1px solid #EFEFEF;

        .cart-select {
            width       : 550px;
            text-align  : left;
            padding     : 25px 0;
            padding-left: 24px;

            td {
                vertical-align: middle;
            }

            a {
                margin-left   : 19px;
                display       : inline-block;
                vertical-align: middle;
                color         : #262626;

                img {
                    vertical-align: middle;
                    width         : 100px;
                    height        : 100px;
                }

                &.cart-info {
                    width: 330px;
                }

                p {
                    font-size    : 14px;
                    width        : 100%;
                    color        : #000;
                    white-space  : nowrap;
                    overflow     : hidden;
                    text-overflow: ellipsis;

                    &.cart-goods-name {
                        height   : 18px;
                        font-size: 16px;
                        color    : #262626;
                    }

                    &.cart-goods-desc {
                        color     : #8C8C8C;
                        margin-top: 10px;
                    }
                }
            }
        }

        .cart-price {
            font-size: 16px;
            color    : #666;
        }

        .cart-number {
            position      : relative;
            vertical-align: middle;

            p.cart-number-max {
                position  : absolute;
                bottom    : 50px;
                left      : 0;
                width     : 100%;
                text-align: center;
                font-size : 14px;
                margin-top: 4px;
                color     : #999;
            }

            .num-box {
                width        : 85px;
                height       : 24px;
                line-height  : 24px;
                border-radius: 2px;
                margin       : 0 auto;

                button {
                    position        : relative;
                    float           : left;
                    width           : 40px;
                    height          : 100%;
                    cursor          : pointer;
                    background-color: transparent;
                    border          : 1px solid #EFEFEF;
                }

                .num-sub,
                .num-add {
                    width: 24px;
                    color: #595959;
                }

                .num-input {
                    float        : left;
                    height       : 100%;
                    text-align   : center;
                    border-top   : 1px solid #EFEFEF;
                    border-bottom: 1px solid #EFEFEF;
                    width        : 35px;
                    line-height  : 24px;

                    input {
                        width           : 100%;
                        height          : 100%;
                        border          : none;
                        outline         : 0;
                        padding         : 0;
                        margin          : -4px 0 0;
                        background-color: transparent;
                        color           : #333;
                        font-size       : 12px;
                        font-weight     : bolder;
                        text-indent     : 12px;
                    }
                }
            }
        }

        .cart-total {
            color: #E02B41;

            .cart-total-txt {
                font-size: 16px;
                opacity  : 1;
            }
        }

        .cart-edit {
            color: #666;

            em {
                display      : none;
                width        : 20px;
                height       : 20px;
                border-radius: 50%;
                text-align   : center;

                &:hover {
                    background-color: #EFEFEF;
                }
            }
        }
    }
}

.disabled {
    cursor: no-drop;
}

/* 商品结算 */
.cart-order-footer {
    position        : relative;
    width           : 100%;
    height          : 70px;
    font-size       : 14px;
    color           : #666;
    line-height     : 67px;
    transition      : background-color 1s;
    margin-top      : 10px;
    background-color: #fff;

    .cart-footer-left {
        margin-left: 24px;

        .delete-all {
            margin        : 0 24px 0 12px;
            color         : #8C8C8C;
            vertical-align: middle;
        }

        .cart-footer-count {
            display       : inline-block;
            color         : #8C8C8C;
            vertical-align: middle;

            &.blue {
                color: #00c3f5;
            }

            span {
                margin: 0 5px;
                height: 3px;
            }
        }
    }

    .cart-footer-right {
        margin-right: 30px;

        .cart-footer-sum {
            color         : #595959;
            vertical-align: middle;

            .cart-footer-num {
                margin: 0 5px;
            }

            .cart-footer-total {
                font-size     : 20px;
                font-weight   : bolder;
                color         : #E02B41;
                margin-right  : 24px;
                vertical-align: middle;
            }
        }

        .to-order-btn {
            cursor          : pointer;
            color           : #FFF;
            border          : none;
            background-color: #F66567;
            border-radius   : 2px;
            font-size       : 14px;
            min-width       : 58px;
            min-height      : 34px;
            line-height     : 34px;
            transition      : .5s all;
            padding         : 0 20px;
            display         : inline-block;
            text-align      : center;
            vertical-align  : middle;
        }
    }
}

.red {
    color: #E02B41;
}

/* 商品 */
.goods-wrap {
    .goods-list {
        li {
            position  : relative;
            float     : left;
            width     : 403px;
            height    : 556px;
            margin    : 0 15px 15px 0;
            background: #fff;
            box-sizing: border-box;

            &:hover {
                transition: all 0.5s;
                box-shadow: 0px 5px 10px 1px #ccc;
            }

            &:nth-child(3n) {
                margin-right: 0;
            }

            a {
                display       : block;
                padding-top   : 40px;
                padding-bottom: 28px;
                max-height    : 556px;
                text-align    : center;
                cursor        : auto;

                img {
                    display   : block;
                    width     : 80%;
                    margin    : 0 auto;
                    min-height: 320px;
                    max-width : 320px;
                }

                .item-color {
                    display   : inline-block;
                    min-height: 20px;
                    margin    : 10px 0;
                    opacity   : 0;
                    visibility: hidden;
                }

                .item-title,
                .item-price {
                    padding      : 0 12px;
                    text-align   : center;
                    overflow     : hidden;
                    text-overflow: ellipsis;
                    white-space  : nowrap;
                }

                .item-title {
                    font-size: 23px;
                    color    : #333;
                }

                .item-desc {
                    display      : inline-block;
                    margin       : 5px auto;
                    color        : #666;
                    text-align   : center;
                    min-height   : 24px;
                    font-size    : 16px;
                    font-weight  : 300;
                    max-width    : 270px;
                    text-overflow: ellipsis;
                    white-space  : nowrap;
                    overflow     : hidden;
                }

                .item-price {
                    color: #c00;

                    em {
                        font-size: 16px;
                    }

                    span {
                        font-size: 28px;
                    }
                }

                .add-cart {
                    width           : 200px;
                    height          : 40px;
                    text-align      : center;
                    font-size       : 16px;
                    margin-top      : 10px;
                    cursor          : pointer;
                    border          : 1px solid #008cff;
                    color           : #008cff;
                    background-color: #fff;
                    transition      : all .4s;

                    &:hover {
                        background-color: #008cff;
                        color           : #fff;
                    }
                }
            }
        }
    }
}